<template>
    <div class="baohutong-setting">
        <div class="content_card">
            <el-form ref="formRef" :model="form" @submit.prevent>
                <el-form-item label="支付手续费:" prop="feeRatio" :rules="rules.feeRatio">
                    <el-input-number
                        v-model="form.feeRatio"
                        :min="0"
                        :max="50"
                        :precision="2"
                        :controls="false"
                        class="input_width_90" />
                </el-form-item>
            </el-form>
            <div class="btn_card">
                <el-button type="primary" @click="onSubmit(formRef)">保存</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import request from '@/request/index';

// 统一设置手续费
const formRef = ref(null);
const form = reactive({
    type: 2,
    feeRatio: null
});
const rules = reactive({
    feeRatio: [{ required: true, message: '该字段必填', trigger: 'blur' }]
});
const onSubmit = async formEl => {
    if (!formEl) return;
    formEl.validate(async valid => {
        if (valid) {
            const res = await request('setQiyiPremiumServ', form);
            ElMessage.success('保存成功');
        }
    });
};
const getDetail = async () => {
    const { data } = await request('getQiyiPremiumServ');
    if (data.feeRatio >= 0) {
        form.feeRatio = +data.feeRatio;
    }
};
onMounted(() => {
    getDetail();
});
</script>

<style lang="scss" scoped>
.baohutong-setting {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .content_card {
        flex: 1;
        padding: 24px;
        background-color: #fff;
        min-height: calc(100vh - 185px);
        .input_width_90 {
            width: 90px;
            display: flex;
            align-items: center;
            :deep(.el-input__inner) {
                text-align: left;
            }
            &::after {
                content: '%';
                margin-left: 2px;
            }
        }
    }
    .btn_card {
        padding: 11px;
        margin-top: 12px;
        background-color: #fff;
        text-align: left;
        .el-button {
            width: 80px;
        }
    }
}
</style>
